<template>
    <div style="height: 100vh;">
        <!-- 导航栏 -->
        <van-nav-bar title="搜索" style="background-color: #FFD85F;" class="headera">
            <template #left>
                <van-icon name="arrow-left" @click="goBack" />
            </template>
        </van-nav-bar>

        <!-- 搜索框 -->
        <van-search v-model="searchQuery" shape="round" background="#FFD85F" placeholder="请输入搜索关键词"
            @search="handleSearch" />

        <!-- 搜索结果 -->
        <div v-if="searchResults.length > 0" class="search-results">
            <h2>搜索结果</h2>
            <div class="recipe-list">
                <div v-for="recipe in searchResults" :key="recipe.id" class="recipe-card">
                    <img :src="recipe.imageUrl" alt="食谱图片" />
                    <h3>{{ recipe.recipeName }}</h3>
                    <p class="description">{{ recipe.description }}</p>
                    <p><strong>卡路里：</strong> {{ recipe.calories }} kcal</p>
                    <button @click="viewRecipe(recipe.id)">查看食谱</button>
                </div>
            </div>
        </div>

        <!-- 无结果提示 -->
        <div v-else-if="searchPerformed" class="no-results">
            <p>没有找到相关的食谱，试试其他关键词吧！</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            searchQuery: '', // 搜索关键词
            searchResults: [], // 搜索结果数组
            searchPerformed: false, // 是否执行了搜索
        };
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        // 处理搜索请求
        handleSearch() {
            this.searchPerformed = true;
            if (this.searchQuery.trim() === '') {
                this.searchResults = [];
                return;
            }

            // 发送请求到后端 API 进行搜索
            axios
                .get("http://localhost:8081/wx/recipes/search", {
                    params: { search: this.searchQuery }
                })
                .then(res => {
                    if (res.data.errno === 0) {
                        this.searchResults = res.data.data; // 确保字段名匹配后端
                    } else {
                        this.searchResults = [];
                    }
                })
                .catch(error => {
                    console.error('搜索请求失败:', error);
                    this.searchResults = [];
                });
        },
        viewRecipe(id) {

            this.$router.push({ name: 'FoodDetails', params: { id: id } });
        }
    }
};
</script>

<style lang="scss">
.headera {
    .van-nav-bar__title {
        color: #fff;
        font-weight: bold;
        font-size: 1.2em;
    }
}

/* 搜索结果样式 */
.search-results {
    padding: 20px;
    background-color: #FFF7E1;
}

.search-results h2 {
    color: #D89A38;
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 10px;
}

.recipe-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.recipe-card {
    width: calc(50% - 40px);
    padding: 15px;
    border: 1px solid #D1A348;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff2c1, #ffe79d);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.recipe-card:hover {
    transform: scale(1.05);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
}

.recipe-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.recipe-card h3 {
    color: #D89A38;
    font-size: 1.3em;
    margin: 8px 0 5px;
    font-weight: bold;
}

.recipe-card .description {
    color: #4B3F30;
    font-size: 0.9em;
    margin: 5px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 固定按钮位置 */
button {
    background-color: #D89A38;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: auto;
    /* Ensures the button is at the bottom of the card */
}

button:hover {
    background-color: #B77A24;
    transform: translateY(-2px);
}

/* 无结果提示 */
.no-results {
    padding: 20px;
    text-align: center;
    color: #4B3F30;
    font-size: 1em;
}
</style>
